<template>
  <h2>{{ str }}</h2>
  <button @click="str += 'a'">修改str</button>
  <hr />
  <h2>{{ reStr }}</h2>
  <button @click="getRestr">获取计算属性的值</button>
</template>

<script setup>
import { ref, computed } from 'vue'

/*
  计算属性：
      使用场景：依赖一个或者多个值产生一个新的值
      特点：它有缓存特性，依赖的数据变了，它会实时改变
      用法：
        1:导入  import {computed} from 'vue'
        2:使用
           const 变量名=computed(()=>{
              return 值
           })
        3：访问：
          js:变量名.value
          html:变量名
*/
const str = ref('abcde')
// 需求：数据反转
const reStr = computed(() => {
  return str.value.split('').reverse().join('')
})
const getRestr = () => {
  console.log(reStr.value)
}
</script>
